<template>
	<view class="page">
		<view class="h30"></view>
		<view class="flex-SB" @click="showCal = true" style="width: 280rpx;margin: 0 auto;color: #1D6EFA;font-size: 28rpx;">
			<u-icon color="#1D6EFA" name="arrow-left"></u-icon>
			<view>{{dateTime}}</view>
			<u-icon color="#1D6EFA" name="arrow-right"></u-icon>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="padding: 20rpx 40rpx;color: #333333;">
				<view class="flex-SB">
					<view>
						<view style="display: flex;align-items: center;font-size: 24rpx;">
							<view
								style="background-color: #295FDA;border-radius: 50%;width: 24rpx;height: 24rpx;margin-right: 10rpx;">
							</view>
							<view>高压(收缩压)</view>
						</view>
						<view style="display: flex;align-items: center;font-size: 24rpx;">
							<view
								style="background-color: #7A08E2;border-radius: 50%;width: 24rpx;height: 24rpx;margin-right: 10rpx;">
							</view>
							<view>低压(舒张压)</view>
						</view>
					</view>
					<view>
						<view style="font-size: 66rpx;">{{bloodPre}}<text
								style="font-size: 24rpx;margin-left: 6rpx;">mmHg</text></view>

						<view style="font-size: 20rpx;color: #aaa;">当前血压 {{lastTime}}</view>
					</view>
				</view>
			</view>
			<view style="width: 686rpx;height: 220px;">
				<l-echart ref="tiredChartDetails"></l-echart>
			</view>
		</view>
		<view class="h30"></view>
		<view class="blocks flex-SB" style="height: 120rpx;background: #fff;line-height: 120rpx;">
			<view class="itme-txt" style="font-weight: bold;">平均血压</view>
			<view class="itme-txt">{{bloodPre}}mmHg</view>
		</view>
		<view class="h30"></view>
		<view class="blocks">
			<view style="font-size: 30rpx;font-weight: bolder;padding: 30rpx;">
				血压说明
			</view>
			<view
				style="color: #A6A6A6;font-size: 28rpx;padding: 0 30rpx 30rpx;    line-height: 1.8;letter-spacing: 2px;">
				<view>血压是指血管内的血液对单位面积血管壁的侧压力，是评估血液循环状态的重要指标。它分为收缩压和舒张压，收缩压是心脏收缩时血液对血管壁的最大压力，舒张压则是心脏舒张时血管壁承受的最低压力。</view>
			</view>
		</view>
		<u-popup :show="showCal">
			<uni-calendar class="uni-calendar--hook" :endDate="maxDate" :showMonth="false" @change="datechange" />
		</u-popup>
	</view>
</template>
<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex';
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	let date = d.getDate();
	date = date < 10 ? `0${date}` : date;
	export default {
		computed: {
			...mapState(['member'])
		},
		components: {
			LEchart,
		},
		data() {
			return {
				lastTime: '',
				bloodPre: '-',
				showCal: false,
				dateTime: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date}`,
				// maxDate:'2024-12-10',
				minDate: `${year}-${month}-${date-100}`,
				nowData: null
			};
		},
		onLoad(opt) {
			let {
				dateTime
			} = opt;
			this.dateTime = dateTime;
			// this.dateTime = "2025-06-24";
			this.initPage(this.dateTime);
		},
		methods: {
			initPage(dateTime) {
				this.lastTime = '';
				this.bloodPre = '-';
				
				if(this.$refs.tiredChartDetails){
					this.$refs.tiredChartDetails.dispose()
				}
				if(!this.member.imei){
					return this.$toast("请登录后查看您的数据！");
				};
				uni.$u.http.post('/client/watch_health_data/type', {
					imei: this.member.imei,
					type: 2,
					date: dateTime
				}).then(res => {
					if(res.status == 500){
						return this.$toast(res.msg||'获取数据失败！');
					}
					if(res.status!=200) return;
					let initdata = [];
					let initdatas = [];
					let date = [];
					let data = res.data.blood;
					if (res.data.blood) {
						this.bloodPre = res.data.avgDbp + '/' + res.data.avgSdp;
					}
					let color = '#22a9e3';
					let a = [];
					if (data.length) {
						this.lastTime = uni.$u.timeFormat(new Date(data[0].time).getTime(), 'mm月dd日 hh:MM')
					}
					for (let i in data) {
						initdata.unshift(data[i].dbp);
						initdatas.unshift(data[i].sdp);
						date.unshift(data[i].time.slice(11, 16))
					}

					this.initTiredChart(initdata, initdatas, date);
				});
			},
			datechange(e) {
				this.showCal = false;
				let dstr = e.fulldate;
				if (this.dateTime == dstr) {
					return;
				}
				this.dateTime = dstr;
				this.initPage(this.dateTime);
			},
			initTiredChart(data, datas, date) {
				if (this.$refs.tiredChartDetails) {
					this.$refs.tiredChartDetails.dispose()
				}
				if (data.length == 0) {
					for (let i = 0; i < 7; i++) {
						data.push(0)
						datas.push(0)
						date.push('')
					}
				}
				let option = {
					color: ['#295FDA', '#7A08E2'],
					grid: {
						top: 20,
						left: 30,
						right: 40,
						bottom: 30
					},
					xAxis: {
						type: 'category',
						data: date,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#BBBBBB'
						},
					},
					yAxis: {
						type: 'value',
						min: 0,
						max: 200,
						position: 'right',
						axisLine: {
							show: false
						},
						axisLabel: {
							color: '#BBBBBB'
						},
					},
					series: [{
							name: '',
							type: 'line',
							// stack: 'Total',
							symbol: 'circle',
							// itemStyle: {
							// 	borderColor: 'transparent',
							// 	color: 'transparent'
							// },
							// emphasis: {
							// 	itemStyle: {
							// 		borderColor: 'transparent',
							// 		color: 'transparent'
							// 	}
							// },
							data: datas,
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(58,77,233,0.8)'
									},
									{
										offset: 1,
										color: 'rgba(58,77,233,0.3)'
									}
								])
							},
						},
						{
							name: 'Life Cost',
							type: 'line',
							symbol: 'circle',
							// stack: 'Total',
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(213,72,120,0.8)'
									},
									{
										offset: 1,
										color: 'rgba(213,72,120,0.3)'
									}
								])
							},
							data: data
						}
					]
				};
				this.$nextTick(() => {
					this.$refs.tiredChartDetails.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.itme-txt {
		padding: 0 20rpx;
	}
</style>